<p>{{ title }}!</p>

<thy-input-group>
  <ng-template #prefix>
    <button thyButton="link-secondary">
      <thy-icon class="text-placeholder" thyIconName="list"></thy-icon>
    </button>
  </ng-template>

  <thy-input [(ngModel)]="value" thyType="input"> </thy-input>

  <ng-template #suffix>
    <button
      *ngIf="value.length > 0"
      (click)="clearInput()"
      thyButton="link-secondary"
    >
      <thy-icon thyIconName="close"></thy-icon>
    </button>
  </ng-template>
</thy-input-group>

<app-todo-list-item [data]="todoList"></app-todo-list-item>

<button thyButton="secondary" (click)="add()">
  <thy-icon thyIconName="plus"></thy-icon>
  ADD
</button>

<button thyButton="info" (click)="old()">
  <thy-icon thyIconName="app-task"></thy-icon>
  OLD
</button>

<router-outlet></router-outlet>
